// 过滤列表
function generateFilterList(list, current, keyword) {
  if (keyword==='' || (keyword!=='' && current!==0)) {
    if (current===10 || current===11) {
      // 本周免费、新手推荐
      return list.filter(item => item.playType===current);
    }
    if (current===0) {
      // 全部
      return list;
    }
    return list.filter(item => item.mainType===current || item.subType===current);
  }
  // 启动正则搜索
  const reg = new RegExp(`(${keyword})`, 'i');
  const filterList = list.filter(item => item.name.search(reg)!==-1);
  return filterList.map(item => ({
    ...item,
    name: item.name.replace(reg, '<mark>$1</mark>'),
  }));
}


const List = ({ list, current, keyword }) => {

  const filterList = generateFilterList(list, current, keyword);
  

  return (
    <ul className="grid grid-cols-10 mt-[30px] gap-y-[20px] pb-[50px]">
      {filterList.map(li => (
        <li key={li.id} className="flex flex-col items-center gap-[4px]">
          <div className="size-[86px] rounded-tl-[10px] rounded-br-[10px] box-content border-[#258df2] border-[2px]" style={{
            backgroundColor: li.bgColor,
          }}></div>
          {/* <p>{li.name}</p> */}
          <p dangerouslySetInnerHTML={{ __html: li.name }}></p>
        </li>
      ))}
    </ul>
  );
};

export default List;